<template lang="pug">
.list
  div.cont 
    h4.title 品牌管理 > 品牌列表
    el-card         
      .top <!--搜索区域-->
        .search
          span.icon-setting
          input(class="ipt" style="color: #B2B4C7;" type="text" placeholder="品牌名称/注册商标号")
        .set
          button(class="add") 审核列表 
            i(class="icon-setting")
          span(class="setting icon-setting")

      .table <!--表格区域-->
        el-table(:data="tableData" border style="width: 100%")
          el-table-column(type="index" label="序号" width="100")
          el-table-column(prop="companyName" label="代理公司" width="120")          
          el-table-column(prop="isImport" label="产地" width="120")
            template(slot-scope="scope")
              .table-item-status(v-if="scope.row.isImport == '1'") 进口 
              .table-item-status(v-if="scope.row.isImport == '2'") 国产
          el-table-column(prop="personsInChargeOfCompany" label="负责人" width="150")
          el-table-column(prop="personsInChargeOfCompanyPhone" label="联系电话" width="150")          
          el-table-column(prop="logo" label="logo" width="150")
            template(slot-scope="scope")
              img(:src="scope.row.logoUrl" style="width:35px")
          el-table-column(prop="certificate" label="证件附件" width="120")
            template(slot-scope="scope")
              .table-item-perview(@click="perview(scope.row)") 预览
          el-table-column(prop="reviewStatus" label="审核状态" width="120")
            template(slot-scope="scope")
              .table-item-status(v-if="scope.row.reviewStatus == '1'") 待审核 
              .table-item-status(v-if="scope.row.reviewStatus == '2'") 审核通过
              .table-item-status(v-if="scope.row.reviewStatus == '3'") 审核不通过
          el-table-column(prop="createDate" sortable label="申请时间" width="120")
            template(slot-scope="{ row }") 
              //- 将时间进行格式化
              .create-time {{ row.createDate | filterDate }}
          el-table-column(label="操作" )
            template(slot-scope="scope")
              el-button(type="text" size="small") 删除

      .index-pagination <!--分页区域-->
        .pagination-total 共 {{ total }} 条
        .pagination-sizes 20 条/页
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        )
        //- el-pagination(@current-change="handleCurrentChange" :page-size="100" layout="prev, pager, next, jumper" :total="1000")
</template>

<script>
import { loadSupplierBrands } from 'api'
import { mapActions } from 'vuex'
export default {
  name: 'brandList',
  data () {
    return {
      total:0,
      currentPage: 1,
      pageSize:20,
      tableData:[],
      logoUrl:'',
    }
  },
  methods:{
    ...mapActions([
      'changeCarousel'
    ]),
    async getBrandList () {
      try {
        let query = { ...this.$route.query, currentPage: this.currentPage, pageLines: this.pageSize  }
        const { ResultSet } = await this.$axios.post(loadSupplierBrands, { ...query } )
        this.tableData = ResultSet.userData.loadBrandList
        this.total=ResultSet.recordNumber
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, page: val } })
      this.getBrandList()
    },
    perview (row) {
      if (!row.certificateList.length) {
        this.$message.error('该品牌还没有上传证件附件！')
        return
      }
      this.changeCarousel({ list: row.certificateList, show: true })
    },
  },
  beforeRouteEnter (to, from, next) {
      // ...
    next(vm => {
      // vm.initFilter()
      vm.getBrandList()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getBrandList()
    this.initFilter()
  },
} 
</script>

<style lang="scss" scoped>
  .list {
    height: 100%;
  }
  .cont{
    padding:0 32px;
  }
  .title{
    margin-bottom:15px;
    color:#B2B4C7;
  }
  .top{
    width:100%;
    height:40px;
    margin-bottom:15px;
    display:flex;
    justify-content: space-between;
      .search{
      width:336px;
      height:40px;
      color:#B2B4C7;
      line-height:40px;
      padding-left:15px;
      border: 1px solid #EDEDED;
      box-sizing: border-box;
      border-radius: 6px;
      margin-bottom:13px;
      .ipt{
        color:#B2B4C7;
      }
    }
      .add{
        width: 96px;
        height: 32px;
        background: #FF708B;
        border-radius: 6px;
        color:#fff;
      }
      .icon-setting:before{
        margin-right:5px;
      }
      .setting{
        width: 46px;
        height: 32px;
        line-height:32px;
        text-align:center;
        margin-left:15px;
        color:#C4C4C4;
        background: #F6F6F9;
        border-radius: 6px;
      }
  }
  .table{
    el-table-column{
      text-align:center;
    }
    .el-table .el-table__cell{
      text-align:center;
    }
  }
  .index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
}
.table-item-perview{
  cursor: pointer;
  color:#FF2E42;
}
</style>
